World Wide Fund
Description
As part of our curriculum at General Assembly, one project requires us to redesign a selected website. My team, consisting of four members chose World Wide Fund, Singapore (WWF). The main focus of our task is to look into the information architecture and usability of the site. It goes into detail the steps involved in the redesigning of wwf.sg, which includes content auditing, competitive analysis, usability testing, affinity mapping, personas, card sorting, tree testing, prototyping, etc.
View the interactive prototype here.
View the interactive prototype here.
When
August 2019
A methodology to guide us..
The Double Diamond methodology was used to guide our design process in order to:
• Be empathetic by understanding the user’s needs
• Help communicate visually and inclusively by allowing a shared understanding of the problem and ideas
• Collaborate and co-create as we are working in a team of four
• To keep on reiterating to deliver the best possible solution
• Be empathetic by understanding the user’s needs
• Help communicate visually and inclusively by allowing a shared understanding of the problem and ideas
• Collaborate and co-create as we are working in a team of four
• To keep on reiterating to deliver the best possible solution
Keeping wwf.sg updated with it's worldwide counterparts..
Visiting wwf.sg and it’s worldwide counterparts, specifically worldwildlife.org, a facelift has to be done. We took inspiration from worldwildlife.org but stuck with the color schemes found from their branding guidelines.
Understanding the issues we are up against..
We wanted to know what’s the main usability issue of the current webpage and did a quick usability test. Using zoom to record our participants, we are able to see the cursor path, recall their comments and view their expressions while doing the different tasks.
Plus / Delta and Affinity Mapping helped to synthesise our findings. Issues such as buttons not being prominent and getting lost due to duplicate pages were the main issues causing failure in the tasks given.
Plus / Delta and Affinity Mapping helped to synthesise our findings. Issues such as buttons not being prominent and getting lost due to duplicate pages were the main issues causing failure in the tasks given.
Cleaning up the site map..
After mapping out it’s current site map, we reorganised it by merging the duplicate links and removing links that were broken. Seeing that it currently has 9 menus, we went through the content and realised that we are able to group the content into three groups - Individuals, Businesses & Schools. By grouping them into these three groups, we are essentially able to present only relevant information to the specific target groups.
Card Sorting and Tree Testing helps in validating our changes. One key discovery is that most participants visited “About Us” instead of “Find Out More” when tasked to get WWF contact information.
Card Sorting and Tree Testing helps in validating our changes. One key discovery is that most participants visited “About Us” instead of “Find Out More” when tasked to get WWF contact information.
Sketches to Lo-Fi..
We started with quick paper sketches as this allowed us to ideate and make changes quickly before going into our Lo-Fi prototype using Figma. Identifying the five different page templates we needed will help us in splitting up the work and not having to redesign pages later.
A 12-grids layout was used to have it being responsive. The number of grids were to be reduce to 8-grids layout for medium size devices (tablets) and 4-grids for smaller screen devices such as mobile phones.
A 12-grids layout was used to have it being responsive. The number of grids were to be reduce to 8-grids layout for medium size devices (tablets) and 4-grids for smaller screen devices such as mobile phones.
.. then test
A second usability test was done with the same task given to compare the success rate of our proposed website design.
One main issue raised during the initial test with the current webpage was that users were confused with the donation page. Lack of proximity and no separation have misled users to think that they were selecting a specific cause to donate to.
By separating the information of the causes and the donation form, it removed the confusion faced. We also split the form into two sections to have users feel more inclined to donate if they were not presented with a long form at the start.
One main issue raised during the initial test with the current webpage was that users were confused with the donation page. Lack of proximity and no separation have misled users to think that they were selecting a specific cause to donate to.
By separating the information of the causes and the donation form, it removed the confusion faced. We also split the form into two sections to have users feel more inclined to donate if they were not presented with a long form at the start.
Final prototype..
Next steps..
As this was a two weeks project, we had to move along with our project timeline and not dwell on certain issues we face.
• What we would like to do if we had more time was to do another usability testing with our final prototype. With those results, we can better reiterate our process to ensure a better site
• We also would have done a System Usability Scale test to see how our site fair
• What we would like to do if we had more time was to do another usability testing with our final prototype. With those results, we can better reiterate our process to ensure a better site
• We also would have done a System Usability Scale test to see how our site fair
Project reflections..
After a gruelling two weeks, I was finally done. Overall, I am pleased with how the website turned out, considering it was a short two weeks project. What did I learn?
Redesigning the website has been a challenging and rewarding journey. It was clear from the project brief that the major challenge will be to clean up the Information Architecture of the website and to allow users to navigate it easily. Finally, I also faced the challenge of creating a website that engages users and also helps fulfil the business goals of the World Wide Fund for Nature (wwf) Singapore.
Redesigning the website has been a challenging and rewarding journey. It was clear from the project brief that the major challenge will be to clean up the Information Architecture of the website and to allow users to navigate it easily. Finally, I also faced the challenge of creating a website that engages users and also helps fulfil the business goals of the World Wide Fund for Nature (wwf) Singapore.
